<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>总结数据监视</title>
    <script src="../js/vue.js"></script>
    <script src="../js/阻止vue在启动时生成生产提示.js"></script>
</head>

<body>
    <div id="root">
        <h1>学生信息</h1>

        <button @click="student.age++">年龄+1岁</button><br><br>
        <button @click="addSex">添加性别属性，默认值：男</button><br><br>
        <button @click="addFriend">在列表首位添加一个朋友</button><br><br>
        <button @click="updataFirstFriendName">修改第一个朋友名字为：张三</button><br><br>
        <button @click="addHobby">添加一个爱好</button><br><br>
        <button @click="updataDriver">修改第一个爱好为：开车</button><br><br>

        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h,index) in student.hobby " :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友们：</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>

</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            student: {
                name: 'tom',
                age: 18,
                hobby: ['抽烟', '喝酒', '烫头'],
                friends: [{
                        name: 'jerry',
                        age: 35
                    },
                    {
                        name: 'tony',
                        age: 36
                    }
                ]
            }
        },
        methods: {
            addSex(){ 
                Vue.set(this.student,'sex','男')
            },
            addFriend(){
                this.student.friends.unshift({name:'jack',age:70})
            },
            updataFirstFriendName(){
                this.student.friends[0].name = '张三 '
            },
            addHobby(){
                this.student.hobby.push('学习')
            },
            updataDriver(){
                // this.student.hobby.splice(0,1,'开车')
                // Vue.set(this.student.hobby,0,'开车')
                this.$set(this.student.hobby,0,'开车')
            }
        },
    })
</script>

</html>